<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    span{
        color: red;
    }
      
   
    
    </style>
</head>
<body>
    <div style="border: 1px solid #ccc;  
            padding: 20px;         
            width: 400px;         
            margin: 10px 0;        
            border-radius: 5px;">
    <p style="color: blue;">欢迎注册会员</p>
    
    <form action="data.html" method="get">
        <div><!--手机号码-->
         <label>手机号码：<input type="tel" name="phone"  placeholder="11位手机号" maxlength="11" required></label>
         <span>必填</span>
        </div>
        <div><!--创建密码-->
            <label>
                创建密码：<input type="password" name="pwd" placeholder="8位密码" maxlength="8" required></label>
                <span>必填</span>
        </div>
        <div ><!--邮箱-->
            <label>注册邮箱：<input type="email" name="email" placeholder="例如:wustzz@sina.com" required></label>
            <span>必填</span>
        </div>
       <div><!--验证码-->
                <label for="num" style="margin-left: 16px;">验证码：</label>
                <input type="text" id="num" name="num">
                <span id="captchaDisplay" style="background-color:mediumpurple;"></span>
        </div>
        <div><!--性别-->
            <label style="margin-left: 32px;">
                  性别：<input type="radio" name="sex" value="male" >男<input type="radio" name="sex" value="female">女
            </label>
        </div>
        <div><!--生日-->
            <label style="margin-left: 32px ;">生日：<input type="date"></label>
        </div> 
        <div><!--年龄-->
            <label style="margin-left: 32px;">年龄：<input type="number" min="1" max="100" value="30" step="1"></label>
        </div>      
        <div><!--籍贯-->
            <label style="margin-left: 32px;">
                籍贯：
                <select name="province" id="p" size="1">
					<option value="">湖北</option>
					<option value="">北京</option>
					<option value="">上海</option>
					<option value="">广东</option>
					<option value="">湖南</option>
					<option value="">四川</option>
					<option value="">重庆</option>
					<option value="">河南</option>
					<option value="">山东</option>
					<option value="">河北</option>
					<option value="">辽宁</option>
				</select>
				<select name="" id="" size="1">
					<option value="武汉">武汉</option>
					<option value="宜昌">宜昌</option>
					<option value="襄阳">襄阳</option>
					<option value="荆州">荆州</option>
					<option value="黄冈">黄冈</option>
					<option value="孝感">孝感</option>
					<option value="十堰">十堰</option>
					<option value="随州">随州</option>
					<option value="荆门">荆门</option>
				</select>
            </label>
        </div>  
        <div><!--学历-->
           <label>个人学历：
            <select name="qualification">
            <option value="0">小学</option>
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3">专科</option>
            <option value="4">本科</option>
            <option value="5">硕士研究生</option>
            <option value="6">博士研究生</option>
            </select></label> 
        </div>
        <div>
            <label style="margin-left: 32px;">月薪<input type="range" id="money" name="money" min="0" max="10000" step="10" value="5000"></label>
           <span  id="moneyValue" style="margin-left: 10px; min-width: 80px; display: inline-block; color: black;">5000元</span>
        </div>
        <script>
        // 获取滑块和显示元素SS
        const rangeInput = document.getElementById('money');
        const valueDisplay = document.getElementById('moneyValue');
        
        // 更新显示的函数
        function updateDisplay() {
            valueDisplay.textContent = `${rangeInput.value}元`;
        }
        
        // 初始显示
        updateDisplay();
        
        // 当滑块值改变时更新显示
        rangeInput.addEventListener('input', updateDisplay);
    </script>
   <div>
    <span style="color: black;">个人爱好：</span>
    <label><input type="checkbox" name="like" value="sing"> 唱歌</label>
    <label><input type="checkbox" name="like" value="run" > 跑步</label>
    <label><input type="checkbox" name="like" value="swim" > 游泳</label>
</div>
    <div action="/upload" method="post" enctype="multipart/form-data">
    <label>个人照片：<input type="file" name="photo">
    <img
					id="photo-preview"
					src=""
					alt="图片预览"
					style="display: none; max-width: 150px; margin-top: 10px"
				/>
</label>
    </div>
    <br />
				<div style="display: flex; align-items: center">
					<span style="margin-right: 10px;color: black;" >个人简介： </span>
					<textarea name="intro" id="intro" cols="30" rows="10"></textarea>
				</div>
	<br />
    <input type="submit" value="提交">
    <input type="reset" value="重填">
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const captchaDisplay = document.getElementById('captchaDisplay');
            const refreshBtn = document.getElementById('refreshBtn');
            // 生成随机验证码
            function generateCaptcha() {
                const characters = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
                let result = '';
                const length = 4;
                for (let i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * characters.length));
                }
                return result;
            }
            // 更新验证码显示
            function updateCaptcha() {
                const newCaptcha = generateCaptcha();
                captchaDisplay.textContent = newCaptcha;
            }
            // 初始生成验证码
            updateCaptcha();
            // 点击验证码也可以刷新
            captchaDisplay.addEventListener('click', updateCaptcha);
        });
        var msg = document.getElementById("msg");     // 根据id值找到span元素
        window.onload = function () {

            msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
        }
        document.getElementById("score").onchange = function () {
            msg.innerHTML = this.value;
        }
    </script>
</body>
</html>